<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

							<!-- 学生管理 -->

<style>
#tableDiv table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

#tableDiv table td,#tableDiv table th {
	padding: 5px 15px;
}

button {
	padding: 5px 15px;
}
th{
	background-color:#F5FFFA;
}
</style>
<div>
	<p>
		选择班级：
		<select id="bjSel">
			<option value="">---请选择---</option>
			<c:forEach items="${list}" var="bj">
				<option value="${bj.id}">${bj.name}</option>
			</c:forEach>
		</select>
	</p>
	<div id="tableDiv" style="display: none;">
		<p class="button">
			<button id="addBtn">新增</button>
			<button id="searchBtn">查询</button>	
		</p>
		<table border="1">
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th colspan="4">操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>
	</div>
</div>

<script type="text/javascript">
var bjId,queryParam={};
$(function(){
	$('.button button').button();
	
	$('#bjSel').selectmenu({
		select:function(event,ui){
			bjId=$(event.target).val();
			if(bjId){
				refreshTable();
				$('#tableDiv').show();	
			}else{
				$('#tableDiv').hide();
			}
		}
	});

	$('#addBtn').click(function(){
		var dialog=$('<div style="display:none"/>');
		$('body').append(dialog);
		dialog.load('student/edit',{bjId:bjId},function(){
			//定义对话框
			dialog.dialog({
				autoOpen:true,
				title:'新增',
				modal:true,
				width:400,
				close:function(e,ui){
					dialog.dialog('destroy');
					dialog.remove();
				},
				buttons:[{
					text:'保存',
					click:function(){
						var form=dialog.find('form');
						var params= new FormData(form[0]);
						$.ajax({
							url:'student/save',
							type:'POST',
							data:params,
							contentType:false,
							processData:false,
							success:function(data){
								refreshTable();
								dialog.dialog('close');
							},
							error:function(){
								alert('网络连接失败...');
							}
						})
					}
				},{
					text:'退出',
					click: function(){
						dialog.dialog('close');
					}
				}]
			});
		});
	
	});
	
	$('#searchBtn').click(function(){
		var dialog=$('<div style="display:none"/>');
		$('body').append(dialog);
		dialog.load('student/search',queryParam,function(){
			dialog.dialog({
				autoOpen:true,
				title:'查询',
				modal:true,
				width:400,
				close:function(e,ui){
					dialog.dialog('destroy');
					dialog.remove();
				},
				buttons:[{
					text:'查询',
					click:function(){
						var form=dialog.find('form');
						queryParam=form.serializeObject();
						refreshTable();
						dialog.dialog('close');
					}
				},{
					text:'清空条件',
					click:function(){
						queryParam={};
						refreshTable();
						dialog.dialog('close');
					}
				},{
					text:'退出',
					click: function(){
						dialog.dialog('close');
					}
				}]
			});
		});
		
	})
	
});

function refreshTable(){
	$.post("student/list",$.extend({},queryParam,{bjId:bjId}),function(data){
		var tbody=$('#tbody');
		tbody.empty();
		for(var i=0;i<data.length;i++){
			var stu=data[i];
			var tr=$('<tr/>');
			tr.data('data',stu);//同步方法
			tr.append($('<td/>').html(stu.stuNo));
			tr.append($('<td/>').html(stu.name));
			tr.append($('<td/>').append( $('<button/>').text('修改').click(function(){
				var tr=$(this).parents("tr");
				var stu=tr.data('data');
				var dialog=$('<div style="display:none;"/>');
				dialog.appendTo($('body'));
				dialog.load('student/edit',{bjId:bjId,id:stu.id},function(){
						dialog.dialog({
							autoOpen:true,
							title:'新增',
							modal:true,
							width:400,
							close:function(e,ui){
								dialog.dialog('destroy');
								dialog.remove();
							},
							buttons:[{
								text:'保存',
								click:function(){
									var form=dialog.find('form');
									var params= new FormData(form[0]);
									$.ajax({
										url:'student/save',
										type:'POST',
										data:params,
										contentType:false,
										processData:false,
										success:function(data){
											refreshTable();
											dialog.dialog('close');
										},
										error:function(){
											alert('网络连接失败...');
										}
									})
								}
							},{
								text:'退出',
								click: function(){
									dialog.dialog('close');
								}
							}]

						})
					})
				})));
			tr.append($('<td/>').append( $('<button/>').text('删除').click(function(){
				if(confirm('是否要删除这条记录？')){
						$.post('student/delete',{id:stu.id},function(data){
							if(data.success){
									refreshTable();
								}else{
									alert(data.msg);
								}
						})
					}
				})));
			tr.append($('<td/>').append( $('<button/>').text('重置密码').click(function(){
					var tr=$(this).parents("tr");
					var stu=tr.data('data');
					if(confirm('是否重置'+stu.name+'的密码？')){
					 	$.post('student/resetPwd',{id:stu.id},function(data){
							alart(data.msg);
						});
					}
				})));
			tr.append($('<td/>').append( $('<button/>').text('显示照片').click(function(){
				var tr=$(this).parents("tr");
				var stu=tr.data('data');
				var dialog=$('<div style="display:none"/>');
				dialog.appendTo($('body'));
				//var img=$('<img/>');
				//img.attr('src','student/download?id='+stu.id);
				//img.attr('width','100%');
				//dialog.append(img);
				dialog.load('student/photo',{id:stu.id},function(){
				dialog.dialog({
					autoOpen:true,
					title:'查询',
					modal:true,
					width:400,
					close:function(e,ui){
						dialog.dialog('destroy');
						dialog.remove();
					},
					})
					})
				})));
			tbody.append(tr);
		}
	});
}
</script>